<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Js多物体动画(改变多属性)</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        ul li{
            width: 200px;
            height: 200px;
            line-height: 200px;
            margin-bottom: 20px;
            font-size: 30px;
            font-family: 'Times New Roman', Times, serif;
            color: bisque;
            text-align: center;
            border: 4px solid #000;
        } 
        #li1{
            background: yellow;
        }
        #li2{
            background: yellowgreen;
        }
        #li3{
            background: chocolate;
            filter: opacity(100);
            opacity: 1;
        }
    </style>
    <script>
        window.onload = function(){
            let aLi1 = document.getElementById('li1');
            let aLi2 = document.getElementById('li2');
            let aLi3 = document.getElementById('li3');
            aLi1.onmouseover = function(){
                startMove(this, 'width', 400);
            }
            aLi1.onmouseout = function(){
                startMove(this, 'width', 200);
            }
            aLi2.onmouseover = function(){
                startMove(this, 'height', 400);
            }
            aLi2.onmouseout = function(){
                startMove(this, 'height', 200);
            }
            aLi3.onmouseover = function(){
                startMove(this, 'opacity', 30);
            }
            aLi3.onmouseout = function(){
                startMove(this, 'opacity', 100);
            }
        }
        function startMove(obj, attr, iTarget){
            clearInterval(obj.timer);
            let curStyle = 0; // 当前style的某个属性值
            obj.timer = setInterval(function(){
                if(attr === 'opacity'){
                    // 如果是透明度，需要特殊处理，因为单位不同，数字类型不同
                    curStyle = Math.round(parseFloat(getStyle(obj,attr))*100);
                } else{
                    curStyle = parseInt(getStyle(obj,attr));
                }
                let speed = (iTarget-curStyle) / 8;
                speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
                if(curStyle === iTarget){
                    clearInterval(obj.timer);
                } else{
                    if(attr === 'opacity'){
                        obj.style.filter = 'opacity('+(curStyle + speed)+')';
                        obj.style.opacity = (curStyle + speed)/100
                    } else{
                        obj.style[attr] = curStyle + speed + 'px';
                    }
                }
            }, 30)
        }
        // 获取样式中的某些属性值
        function getStyle(obj, attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }
            return getComputedStyle(obj,false)[attr];
        }

    </script>
</head>
<body>
    <ul>
        <li id="li1">我会变长</li>
        <li id="li2">我会变高</li>
        <li id="li3">我会变透明</li>
    </ul>
</body>
</html>